<script setup lang="ts">
import Grid from "@/components/framework/grid.vue";
import DockMenu from "@/pages/main/layout/dock-menu.vue";
import ToggleView from "@/components/framework/toggle-view.vue";
import type { DockMenuItem } from "@/pages/main/config/types.ts";
import { hci } from "@/components/framework/icon";
import { useLocalRef } from "@/framework/vue/hooks/state.ts";
import ToggleItem from "@/components/framework/toggle-item.vue";

defineOptions({ name: "page-main" });

/* 首页 */

const menus: DockMenuItem[] = [
  {
    key: "dev-env",
    name: "开发环境",
    icon: hci("icon-developer"),
    component: () => import("@/modules/dev-env/index.vue"),
  },
  {
    key: "project",
    name: "项目管理",
    icon: hci("icon-project-manage"),
    component: () => import("@/modules/local-project/project-manager.vue"),
  },
  {
    key: "tools",
    name: "工具箱",
    icon: hci("icon-toolbox2"),
    component: () => import("@/modules/tools/index.vue"),
  },
  {
    key: "convert",
    name: "转换工具",
    icon: hci("icon-wendang2"),
  },
  {
    key: "video",
    name: "视频工具",
    icon: hci("icon-video"),
  },
  {
    key: "database",
    name: "数据库",
    icon: hci("icon-database"),
  },
  {
    key: "lan-share",
    name: "LAN-Share",
    icon: hci("icon-lx-send"),
    component: () => import("@/modules/lan-share/index.vue"),
  },
  {
    key: "windows",
    name: "Windows工具",
    icon: hci("icon-windows"),
  },

  // {
  //   key: "movie",
  //   name: "",
  //   icon: hci("icon-mv"),
  //   bottom: true,
  // },
  {
    key: "games",
    name: "",
    icon: hci("icon-lemon-tea"),
    bottom: true,
  },
];

const activeKey = useLocalRef("main.dock.activeKey", menus[0].key);
</script>

<template>
  <grid cols-preset="two-cols-0">
    <dock-menu :items="menus" v-model:active-key="activeKey" />
    <div>
      <toggle-view v-model:active-key="activeKey">
        <template v-for="it in menus" :key="it.key">
          <toggle-item v-if="it.component" :component="it.component" :item-id="it.key" />
        </template>
      </toggle-view>
    </div>
  </grid>
</template>

<style lang="less">
.main-nav-view {
  position: relative;
}
</style>
